<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    <title>02结构性伪类选择器1</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        table tr td{
            width: 3em;
        }
        :root{/*权限比较高，可以覆盖HTML*/
            background: skyblue;
        }
        html{
            background: lightgreen;
        }
        button:nth-of-type(1):active ~ ul li a:not([href*='text3']){/*取反*/
            background: yellow;
        }
        button:nth-of-type(2):active ~ table tr td:empty{/*没有内容的元素*/
            background: lime;
        }
        div:target{/*选择书签对应的内容部分*/
            background: pink;
        }
    </style>
</head>
<body>
    <h1>1-2结构性伪类选择器1</h1>
    <h3>:root 根元素背景颜色为skyblue</h3>
    <h3>html 元素背景为lightgreen，但是会被:root覆盖，注释掉:root的样式即可看到</h3>

    <h3>点击下面按钮，按下鼠标左键不抬起时请观察选择结果</h3>
    <button >ul li a:not([href*='text3'])</button>下面列表的a元素中href不含text3的元素<br>
    <button>table tr td:empty</button>下面表格中td中不包含子元素的<br>

    <h3>下面是href的值和对应目标元素位置的跳转，可通过伪元素:target来设置目标元素的样式，此例中为背景变粉红色，同时清除其他target背景色。</h3>
    <ul>
        <li><a href="#text1">示例文字1</a><code>href="#text1"</code></li>
        <li><a href="#text2">示例文字2</a><code>href="#text2"</code></li>
        <li><a href="#text3">示例文字3</a><code>href="#text3"</code></li>
        <li><a href="#text4">示例文字4</a><code>href="#text4"</code></li>
        <li><a href="#text5">示例文字5</a><code>href="#text5"</code></li>
     </ul>

    <table border="1">
        <tr><td>A</td><td>B</td><td></td><td>D</td></tr>
        <tr><td></td><td>F</td><td>H</td><td>I</td></tr>
    </table>
    <br>

    <div id="text1">
        <h2>示例文字1</h2>
        <p>...</p>
        <p>...</p>
    </div>
    <br>
    <div id="text2">
        <h2>示例文字2</h2>
        <p>...</p>
        <p>...</p>
    </div>
    <br>
    <div id="text3">
        <h2>示例文字3</h2>
        <p>...</p>
        <p>...</p>
    </div>
    <br>
    <div id="text4">
        <h2>示例文字4</h2>
        <p>...</p>
        <p>...</p>
    </div>
    <br>
    <br>
    <div id="text5">
        <h2>示例文字5</h2>
        <p>...</p>
        <p>...</p>
    </div>
</body>
</html>